<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>熊猫部落-任务</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      #video-0 {
        position: absolute;
        width: 658px;
        height: 419px;
        left: 125px;
        top: 151px;
      }
      #video-0.focus {
        transform: scale(1);
      }
      .btn {
        position: absolute;
        width: 120px;
        height: 40px;
        top: 30px;
        background: url(./images/mission_btn_bg.png);
      }
      #btn-0 {
        background-position: 0 -100px;
        left: 810px;
      }
      #btn-1 {
        background-position: 0 -170px;
        left: 960px;
      }
      #btn-2 {
        background-position: 0 -240px;
        left: 1110px;
      }
      #btn-3 {
        width: 210px;
        height: 70px;
        left: 870px;
        top: 430px;
      }
      #sign-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 1280px;
        height: 720px;
        z-index: 1001;
        display: none;
      }
      #sign-container .sign-item {
        position: absolute;
        height: 177px;
        width: 140px;
        background: url(./images/sign_flag.png) no-repeat left top;
      }
      #sign-container .sign-item .time {
        line-height: 45px;
        color: #fff;
        text-align: center;
        color: #fff;
        font-size: 18px;
      }
      #sign-container .sign-item.active {
        background-position: right top;
      }
      #sign-body {
        position: absolute;
        left: 308px;
        top: 151px;
        width: 677px;
        height: 444px;
      }
      #sign-0,
      #sign-1,
      #sign-2,
      #sign-3 {
        top: 50px;
      }
      #sign-4,
      #sign-5,
      #sign-6 {
        top: 232px;
      }
      #sign-0,
      #sign-4 {
        left: 45px;
      }
      #sign-1,
      #sign-5 {
        left: 195px;
      }
      #sign-2,
      #sign-6 {
        left: 345px;
      }
      #sign-3 {
        left: 495px;
      }
      #message {
        position: absolute;
        width: 300px;
        height: 50px;
        line-height: 50px;
        background: rgba(0, 0, 0, 0.5);
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -25px;
        display: none;
        z-index: 1002;
        text-align: center;
        font-size: 18px;
        color: #fff;
      }
      #title-container{
        position: absolute;
        z-index: 100;
        height: 50px;
        line-height: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0 20px;
        background: url(./images/mark_bg.png) repeat;
        color: #fff;
        font-size: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    </style>
  </head>
  <body onload="init()" onunload="exit()">
    <div id="main">
	<!--联通不要 -->
      <div class='smallResolution' id="smallResolution"></div>
	  <!--联通不要 -->
      <div id="video-0" class="item video">
        <div id="title-container">
          正在播放： <span id="play_title"></span>
        </div>
      </div>
      <div class="btn item border-radius" id="btn-0"></div>
      <div class="btn item border-radius" id="btn-1"></div>
      <div class="btn item border-radius" id="btn-2"></div>
      <div class="btn btn-1 item border-radius" id="btn-3"></div>
      <div id="sign-container">
        <div id="sign-body"></div>
      </div>
      <div id="message" class="border-radius"></div>
      <div id="volume">
        <div class="volume-container">
          <div id="volume-bar"></div>
        </div>
        <img src="images/controls/volum.png" alt="" />
      </div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>

    <script src="components/dialog.js"></script>
    <script src="components/point/sign.js"></script>
    <script src="components/series.js"></script>
    <script src="components/video.js"></script>
    <script>
      var hanlderEnter = {
        btn: function (id, index) {
          switch (index) {
            case "0":
              sign.signPoints({
                points: 10,
                desc: "签到",
              });
              sign.show();
              break;
            case "2":
              var info = utils.getCurInfo()
              var id = info.id
              var form = config.path + '/mission.html?elId=' + id + '&typeId=' + series.typeId
              var to = config.path + '/person.html'
              page.addUrl(to, form)
              break;
            default:
              if (page.isSub == 0) return dialog.show('您已订购，不能重复订购')
              utils.order()
              break;
          }
        },
        video: function (id, index) {
          if (!(page.data.series && page.data.series.length)) return dialog.show('当前栏目未绑定节目，请联系管理员')
          var form = config.path + '/mission.html?elId=video-0&typeId=' + series.typeId
          var to = config.path + "/live.html?typeId=" + series.typeId
          page.addUrl(to, form)
        },
      };

      function getPreFocus() {
        // var typeId = utils.getUrlParam("typeId", "");
        var elId = utils.getUrlParam("elId", "");
        var dom = document.getElementById(elId || "btn-0");
        dom && utils.toggleClass(dom);
        renderBg();
        series.init(config.typeids[1])
  
        // utils.auth((page.data.program && page.data.program.code) || '')
        if (page.data.series.length > 0) {
          video.init({
            left: 125,
            top: 151,
            width: 658,
            height: 419,
            seriesId: page.data.series[0].ID,
            el: '#video-0',
            type: 'live'
          })
        }
      }

      function keyMute () {
       video.toggleMute()
      }

      function keyVolumeUp () {
        video.volumeUp()
      }

      function keyVolumeDown () {
        video.volumeDown()
      }

      function renderBg() {
        try {
          var picture = page.data.bgs[5].typePicture[0].picPath3;
          $("#main").css("background-image", "url(" + picture + ")");
        } catch (error) {}
      }

      function init() {
        page.init();
        dialog.init();
        sign.init();
        getPreFocus();
        log.commit({
          name: '熊猫任务页面',
          type1: 'browse',
          type2: 'mission',
          starttime: new Date().getTime(),
        })
      }

      function keyUp() {
        if (sign.visible || dialog.visible) return;
        var dom = move.up();
        dom && utils.toggleClass(dom);
      }

      function keyDown() {
        if (sign.visible || dialog.visible) return;
        var dom = move.down();
        dom && utils.toggleClass(dom);
      }

      function keyLeft() {
        if (sign.visible || dialog.visible) return;
        var dom = move.left();
        dom && utils.toggleClass(dom);
      }

      function keyRight() {
        if (sign.visible || dialog.visible) return;
        var dom = move.right();
        dom && utils.toggleClass(dom);
      }

      function keyEnter() {
        if (dialog.visible) return dialog.hide()
        if (sign.visible) return sign.hide()
        var info = utils.getCurInfo();
        hanlderEnter[info.type](info.id, info.index);
      }

      function keyBack() {
        if (dialog.visible) return dialog.hide()
        if (sign.visible) return sign.hide()
        page.goback()
      }

      function exit () {
        try {
          video.destroy()
        } catch (error) {
          
        }
      }
    </script>
  </body>
</html>
